<template>
  <v-container>
    <v-row>
      <v-col cols="12">
        <h1 class="text-h3 mb-4">{{ $t('message.products') }}</h1>
        
        <!-- Tab切换器 -->
        <v-tabs
          v-model="activeTab"
          class="mb-6"
          color="primary"
          align-tabs="center"
          show-arrows
        >
          <v-tab
            v-for="category in categories"
            :key="category.value"
            :value="category.value"
            class="tab-item"
          >
            <v-icon left>{{ category.icon }}</v-icon>
            {{ getCategoryName(category.value) }}
          </v-tab>
        </v-tabs>
      </v-col>
    </v-row>
    
    <!-- 商品列表 -->
    <v-fade-transition mode="out-in">
      <v-row :key="activeTab">
        <v-col
          v-for="(product, i) in filteredProducts"
          :key="`${activeTab}-${product.id}`"
          cols="12"
          sm="6"
          md="3"
          lg="3"
        >
          <div 
            class="product-card-container"
            :style="{ animationDelay: `${i * 0.1}s` }"
          >
            <v-card 
              class="mx-auto product-card" 
              max-width="400"
              elevation="2"
            >
              <div class="product-image-container">
                <v-img
                  :src="product.image"
                  height="200px"
                  cover
                ></v-img>
                
                <div class="product-content">
                  <h3 class="product-title">{{ getProductName(product) }}</h3>
                  <p class="product-category product-description-hover">{{ getProductCategory(product) }}</p>
                  <v-btn 
                    color="white" 
                    variant="elevated" 
                    class="view-details-btn"
                    @click="goToProductDetail(product.id)"
                  >
                    {{ $t('products.viewDetails') }}
                  </v-btn>
                </div>
                
                <div class="product-hover-overlay"></div>
              </div>
            </v-card>
          </div>
        </v-col>
      </v-row>
    </v-fade-transition>
    
    <!-- 空状态 -->
    <v-row v-if="filteredProducts.length === 0">
      <v-col cols="12" class="text-center py-8">
        <v-icon size="64" color="grey lighten-1">mdi-package-variant</v-icon>
        <p class="text-h6 mt-4 grey--text">{{ $t('products.empty') }}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { productCategories, productsData, getProductsByCategory } from '@/config/products.js'

export default {
  name: 'ProductsPage',
  data() {
    return {
      activeTab: 'all',
      // 使用配置文件中的分类和产品数据
      categories: productCategories,
      products: productsData
    }
  },
  computed: {
    filteredProducts() {
      return getProductsByCategory(this.activeTab)
    }
  },
  // 在 mounted 和 watch 中修改逻辑
  mounted() {
    // 检查路由参数
    const productId = this.$route.query.id;

    if (productId) {
      this.activeTab  = productId
    } 
  },

  methods: {
    goToProductDetail(id) {
      this.$router.push(`/product-detail?id=${id}`)
    },
    
    // 获取分类名称
    getCategoryName(categoryValue) {
      const categoryMap = {
        'all': 'all',
        1: 'precursors',
        2: 'speciality-gases', 
        3: 'electronic-gases'
      }
      const categoryKey = categoryMap[categoryValue] || 'all'
      return this.$t(`products.categories.${categoryKey}`)
    },
    
    // 获取产品名称
    getProductName(product) {
      // 如果产品有 name 字段，直接使用
      if (product.name) {
        return product.name
      }
      // 否则根据分类和ID生成默认名称
      const categoryNames = {
        1: 'Precursor',
        2: 'Speciality Gas',
        3: 'Electronic Gas'
      }
      const categoryName = categoryNames[product.categoryValue] || 'Product'
      return `${categoryName} ${product.id}`
    },
    
  
    // 获取产品描述
    getProductCategory(product) {
      // 如果商品有描述字段，直接返回
      if (product.description) {
        return product.description
      }      
      // 如果没有描述，返回分类描述
      const categoryDescriptions = {
        1: this.$t('products.categories.1.description'),
        2: this.$t('products.categories.2.description'),
        3: this.$t('products.categories.3.description')
      }
      
      return categoryDescriptions[product.categoryValue] || this.$t('products.defaultDescription')
    }
  }
}
</script>

<style scoped>
.product-card-container {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  animation: slideInUp 0.6s ease forwards;
  opacity: 0;
  transform: translateY(30px);
  padding: 20px; /* 为阴影留出空间 */
  margin: -20px; /* 抵消padding的影响 */
}

/* 如果需要裁剪图片，在图片容器上单独设置 */
.product-image-container {
  position: relative;
  overflow: hidden; /* 只裁剪图片部分 */
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card {
  transition: all 0.3s ease;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.1),
    0 5px 15px rgba(0,0,0,0.07),
    0 0 0 1px rgba(0,0,0,0.05);
}

.product-image-container {
  position: relative;
  overflow: hidden;
}

.product-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(25, 118, 210, 0.5), rgba(25, 118, 210, 0.7));
  transform: translateY(-100%);
  transition: transform 0.4s ease;
  z-index: 1;
}

.product-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 8px 12px; /* 减少内边距 */
  transform: translateY(0);
  transition: all 0.4s ease;
  z-index: 2;
  min-height: auto; /* 移除固定高度 */
}

.product-card-container:hover .product-content {
  background-color: white;
  height: auto;
  transform: translateY(0);
  padding: 15px; /* hover时恢复正常内边距 */
}

.product-title {
  font-size: 1.1rem; /* 稍微减小字体 */
  font-weight: bold;
  margin-bottom: 2px; /* 减少底部间距 */
  color: white;
  transition: color 0.3s ease;
  line-height: 1.2; /* 减少行高 */
}

.product-category {
  font-size: 0.85rem; /* 稍微减小字体 */
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 4px; /* 减少底部间距 */
  transition: color 0.3s ease;
  
  /* 添加文本省略功能 */
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 默认只显示1行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-height: 1.3em; /* 对应1行的高度 */
  word-wrap: break-word;
  word-break: break-word;
}

/* 默认隐藏描述内容 */
.product-description-hover {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  height: 0; /* 默认高度为0 */
  margin: 0; /* 移除边距 */
}

/* 鼠标移入时显示描述 */
.product-card-container:hover .product-description-hover {
  opacity: 1;
  visibility: visible;
  height: auto; /* 恢复高度 */
  margin-bottom: 4px; /* 恢复边距 */
  -webkit-line-clamp: 2; /* hover时显示2行 */
  max-height: 2.6em; /* 对应2行的高度 */
}

.product-card-container:hover .product-title,
.product-card-container:hover .product-category {
  color: #333;
}

.view-details-btn {
  background-color: white !important;
  color: #1976D2 !important;
  border: 1px solid #1976D2;
  margin-top: 8px;
  display: none;
  font-size: 0.9rem;
}

.product-card-container:hover .view-details-btn {
  display: block;
  animation: fadeIn 0.3s ease forwards;
}

.product-card-container:hover .product-hover-overlay {
  transform: translateY(0);
}

.tab-item {
  transition: all 0.3s ease;
}

.tab-item:hover {
  transform: translateY(-2px);
}

/* Tab切换动画 - 修改为更具体的属性，避免覆盖 hover 效果 */
.v-fade-transition-enter-active,
.v-fade-transition-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.v-fade-transition-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.v-fade-transition-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

/* 确保产品卡片的 hover 效果优先级更高 */
/* 修改产品卡片的基础样式 */
.product-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.1),
    0 5px 15px rgba(0,0,0,0.07),
    0 0 0 1px rgba(0,0,0,0.05) !important;
}

/* 修改 Tab切换动画 - 避免影响 hover 效果 */
.v-fade-transition-enter-active,
.v-fade-transition-leave-active {
  transition: opacity 0.4s ease, transform 0.4s ease !important;
}

.v-fade-transition-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.v-fade-transition-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .product-content {
    padding: 12px;
  }
  
  .product-title {
    font-size: 1.1rem;
  }
  
  .product-category {
    font-size: 0.8rem;
  }
}
</style>

.product-description {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  line-height: 1.4;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card-container:hover .product-description {
  color: #666;
}